<template>
  <div class="payment-page">
    <div class="payment-header">
      <back-title :message="message" ref="backTitle"></back-title>
    </div>
    <div class="payment-body">
      <span class="price-sign">￥</span>
      <h2>{{price()}}</h2>
    </div>
    <div class="payment-footer">
      <van-button round type="danger" size="large" @click="show = true" text="立即支付" />
      <van-overlay :show="show" @click="show = false">
        <van-password-input :value="value" :error-info="errorInfo" :length="6" :focused="showKeyboard"
          @focus="showKeyboard = true" />
        <van-number-keyboard v-model="value" :show="showKeyboard" @blur="showKeyboard = true" />
      </van-overlay>
    </div>
  </div>
</template>

<script>
  import {
    mapState
  } from 'vuex'
  import axios from 'axios'
  import BackTitle from '../BackHeader/BackTitle.vue'
  export default {
    components: {
      BackTitle
    },
    data() {
      return {
        value: '',
        showKeyboard: true,
        show: false,
        errorInfo: '',
        message: '支付'
      }
    },
    methods: {
      price() {
        return this.$route.query.price
      }
    },
    watch: {
      value(value) {
        if (value.length === 6 && value === '123456') {
          this.$router.push({
            name: 'PaymentCompleted'
          })
          var params = {
            pay_status: "已支付"
          }
          axios.put(axios.defaults.baseURI + "books/mallorder/" + this.orderNum + '/', params).then(res => {
            console.log(res)
          })
        } else if (value.length === 6 && value !== '123456') {
          this.errorInfo = '密码错误'
        } else {
          this.errorInfo = ''
        }
      }
    },
    computed: {
      ...mapState(['orderNum'])
    }
  }
</script>

<style scoped>
  /deep/.set-header-ellipsis {
    visibility: hidden;
  }

  .payment-footer {
    padding: 0 8px;
    position: fixed;
    bottom: 0;
    width: 100%;
    box-sizing: border-box;
  }

  .van-button__content {
    height: 45px;
  }

  .payment-body {
    display: flex;
    font-size: 19px;
    color: red;
    align-items: center;
    justify-content: center;
  }

  .payment-body .price-sign {
    font-size: 19px;
  }
</style>
